<script setup lang="ts">
import { useCategoryStore } from '@/stores/categoryStore';
import { onBeforeRouteUpdate } from 'vue-router';
import type { GoodsRequestParams } from "@/types/Goods";
//以下方式是不推荐导入方式因为项目打包时会将lodash整体打包进来
//import _from "lodash"
//以下是推荐的导入方式，因为导入谁才构建谁
import omitBy from "lodash/omitBy";
import transform from "lodash/transform";
// 定义当前组件要触发的自定义事件
const emit = defineEmits<{(e:"onChanged",params:FilterParams):void}>();
  // 获取存储分类状态的 store 对象
const categoryStore = useCategoryStore();  
// 获取路由信息对象
const route = useRoute();
// 获取筛选条件状态
const { subCategoryFilters } = storeToRefs(categoryStore);
// 获取请求筛选条件的方法
const { getSubCategoryFilters } = categoryStore;
// 获取筛选条件
getSubCategoryFilters(route.params.sub as string);
// 路由切换前
onBeforeRouteUpdate((to) => {
  // 获取目标页面的筛选条件
  getSubCategoryFilters(to.params.sub as string);
  // 重置用户选择的筛选条件
  selectedFilters.value ={};
});

//服务器端要求的请求参数的数据格式
type FilterParams = Partial<Pick<GoodsRequestParams, "brandId" | "attrs">>;
// 用户选择筛选条件时使用的类型
interface SelectedFilters {
  brandId: string;
  [groupName: string]: string;
}
// 由于所有的筛选条件都是可选的, 所以此处使用了 Partial
const selectedFilters = ref<Partial<SelectedFilters>>({});
// 更新筛选条件
function onSelectedFiltersChanged(filters: Partial<SelectedFilters>) {
  // 更新筛选条件状态
  selectedFilters.value = { ...selectedFilters.value, ...filters };
  // 重构筛选条件
  const temp = omitBy(selectedFilters.value,(value)=> value=== undefined) 
  const params = transform(
    temp,
    //对筛选条件进行重构
    (result: FilterParams,value,key) =>{
      //如果属性时品牌ID
      if(key == 'brandId'){
        //存储品牌ID
        result[key] = value!;
      }else{
        //否则属性时其他的筛选条件
        //判断attrs 数组是否存在，如果不存在创建它
        if(typeof result.attrs === 'undefined') result.attrs=[];
        //存储筛选条件类别的名字和具体筛选条件名字
        result.attrs.push({
          groupName:key,
          propertyName:value!,
        })
      }
    },
    {}
    )
  // 将用户选择的筛选条件传递到父父组件以备使用
  emit("onChanged", params);
}
</script>
<template>
  <div class="sub-filter" v-if="subCategoryFilters.status ==='loading'">
    <XtxSkeleton class="item" width="800px" height="25px" />
    <XtxSkeleton class="item" width="800px" height="25px" />
    <XtxSkeleton class="item" width="600px" height="25px" />
    <XtxSkeleton class="item" width="600px" height="25px" />
    <XtxSkeleton class="item" width="600px" height="25px" />
  </div>
    <div class="sub-filter"  v-if="subCategoryFilters.status === 'success'">
      <div class="item">
        <div class="head">品牌：</div>
        <div class="body">
          <a class="active"  @click="onSelectedFiltersChanged({ brandId: undefined })" href="javascript:">全部</a>
          <a href="javascript:" @click="onSelectedFiltersChanged({ brandId: brand.id })" v-for="brand in subCategoryFilters.result[route.params.sub as string].brands" :key="brand.id">{{brand.name}}</a>
        </div>
      </div>
      <div class="item" v-for="saleProperties in subCategoryFilters.result[route.params.sub as string].saleProperties" :key="saleProperties.id"> 
        <div class="head">{{ saleProperties.name}}：</div>
        <div class="body">
          <a class="active" href="javascript:" @click="onSelectedFiltersChanged({ [saleProperties.name]: undefined })">全部</a>
          <a href="javascript:" @click="onSelectedFiltersChanged({ [saleProperties.name]: property.name })" v-for="property in saleProperties.properties" :key="property.id">{{property.name}}</a>
        </div>
      </div>
    </div>
  </template>
  
  <style scoped lang="less">
    .xtx-skeleton {
  margin: 10px 0;
}
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all 0.3s;
          display: inline-block;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
  </style>